<template>
  <div>
    <div class="search-block" v-if="showsearch">
      <searchtab @searchopen="opensearch" @checkstab="goindex" @linksearch="searchlink" :tablist="tablistprop"></searchtab>
    </div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan" :searchprop="searchtext"></searchlist>
    </div>
    <div class="detail-top-tab pc-bk" >
      <navblock></navblock>
    </div>
    <div class="topic-banner">
      <div class="top-banner-block">
        <div class="topic-banner-img" v-lazy="item"  :style="{backgroundImage:'url(' + datalist.subject_info.banner + ')'}"></div>
      </div>
    </div>
    <div class="topic-tab-list">
      <ul>
        <li v-for="topictab in datalist.nav">
          <div class="topic-tab-text" @click="morebtn" :data-id="topictab.id" :data-type="topictab.content_type">
            {{topictab.name}}
          </div>
        </li>
      </ul>
    </div>
    <div class="topic-content">
      <div class="topic-content-block">
        <div class="topic-title">
          {{datalist.subject_info.top_title}}
        </div>
        <!-- <span>【详情】</span> -->
        <!-- <div class="meeting-back-note">
          {{datalist.subject_info.note}} 
        </div> -->
        <div class="meeting-back-content">
          <div class="background-img" :style="{backgroundImage:'url(' + datalist.subject_info.bg_thumbnail + ')'}"></div>
          <div class="background-note">
            <span  ref="elememt" v-bind:class="{'ovhidden': detailtext === true}" class="notetext">
              {{datalist.subject_info.note}}
          </span><!-- <span>【详情】</span> -->
          </div>
           <span class="todetail" @click="toBackDetail" v-if="detailtext">【详情】</span>
          <div class="clear"></div>
          <!-- <div class="img-scroll-icon bot" @click="smoothDown">
            <img src="../../img/mobile/foot.png">
          </div>
          <div class="img-scroll-icon top">
            <img src="../../img/mobile/top.png" @click="smoothUp">
          </div> -->
        </div>
      </div>
      <div class="topic-content-block" v-for="(newsdata, newsindex) in datalist.news" v-if="newsdata.list.length > 0 && newsdata.link_type !== 'SUBJECT'">
        <div class="topic-title" @click="morebtn"  v-if="newsdata.link_type !== 'CONFERENCE'" :data-id="newsdata.second_level_cid" :data-type="newsdata.type">
          {{newsdata.second_level_name}}
          <span class="sidle-right-icon">
            <img src="../../img/mobile/righticon.png">
          </span>
        </div>
        <div class="topic-title" v-else>
          {{newsdata.second_level_name}}
        </div>
        <!--会议焦点-->
        <div class="meeting-focus" v-if="newsdata.link_type === 'MEATING_FOCUS'">
          <div class="focus-left-block">
            <swiper :options="swiperOptionHome1" ref="mySwiper">
              <swiper-slide  v-for="(contentlist, contindex) in newsdata.list">
                <div class="focus-banner bk" @click="linkDetail" :data-id="contentlist.id" :style="{backgroundImage:'url(' + contentlist.cover_path + ')'}"></div>
              </swiper-slide>
              <div class="swiper-prev" slot="button-prev" v-if="newsdata.list.length > 1">
                <img src="../../img/mobile/leftswp.png">
              </div>
              <div class="swiper-next" slot="button-next" v-if="newsdata.list.length > 1">
                <img src="../../img/mobile/rightswp.png">
              </div>
            </swiper>
          </div>
          <div class="focus-right-block">
            <div class="right-focus-top">
              <div class="focus-top-list"  @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 2">
                <div class="focus-top-title">{{contentlist.title}}</div>
                <div class="focus-top-note">{{contentlist.note}}<!-- <span>【详情】</span> --></div>
              </div>
            </div>
            <div class="right-focus-bot" @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 7 && contindex > 2">
              <div class="focus-bot-list" >
                <span>>>{{contentlist.title}}</span>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <!--新闻列表1-->
        <div class="topic-news-list"  v-if="newsdata.link_type === 'SUBJECT_NEWS_LIST' && datalist.subject_info.cate_id === 1">
          <div class="news-list-top">
            <div class="news-top-list"  @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 2">
              <div class="news-top-img bk"  v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
              <div class="news-top-info">
                <div class="news-top-title">
                  {{contentlist.title}}
                </div>
                <div class="news-top-note">
                  {{contentlist.note}}
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="news-list-bot" v-if="newsdata.list.length > 2">
            <div class="news-bot-list"  v-for="(contentlist, contindex) in newsdata.list"  @click="linkDetail" :data-id="contentlist.id" v-if="contindex >= 2 && contindex < 10">
              <span class="focus-icon"></span>
              {{contentlist.title}}
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <!--新闻列表2-->
        <div class="topic-news-list"  v-if="newsdata.link_type === 'SUBJECT_NEWS_LIST' && datalist.subject_info.cate_id === 2">
          <div class="news-list-top">
            <div class="news-top-list"  @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 4">
              <div class="news-top-img bk"  v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
              <div class="news-top-info">
                <div class="news-top-title">
                  {{contentlist.title}}
                </div>
                <div class="news-top-note">
                  {{contentlist.note}}
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <!--嘉宾演讲-->
        <div class="topic-agenda-list" v-if="newsdata.link_type === 'SUBJECT_GUEST_SPEECH' || newsdata.link_type === 'SUBJECT_INTERVIEWS'">
          <div class="agenda-list"  @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 4">
            <div class="topic-agenda-img bk" v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
            <!-- <div class="topic-agenda-job" v-if="contentlist.author_info.length > 0">{{contentlist.author_info[0].job}}</div> -->
            <!-- <div class="topic-agenda-job" v-else></div> -->
            <div class="topic-agenda-job"></div>
            <div class="topic-agenda-title">{{contentlist.title}}</div>
            <div class="topic-agenda-note">{{contentlist.note}}</div>
          </div>
        </div>
        <!--精彩环节-->
        <div class="topic-agenda-list"  v-if="newsdata.link_type === 'SUBJECT_SESSIONS'">
          <div class="agenda-list"  @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 4">
            <div class="wonder-agenda-img bk" v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
            <div class="wonder-agenda-title">
              {{contentlist.title}}
            </div>
          </div>
        </div>
        <!--精彩视频-->
        <div class="wonder-video-block" v-if="newsdata.link_type === 'SUBJECT_VIDEO'">
          <div class="agenda-list"  @click="linkDetail" :data-id="contentlist.id"  v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 8">
            <div class="video-list-show">
              <div class="topic-agenda-img bk" v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}">
                <div class="wonder-vd-icon">
                  <img src="../../img/mobile/video-icon1.png">
                </div>
              </div>
              <div class="video-title">{{contentlist.title}}</div>
            </div>
            <div class="video-list-hover">
              <div class="topic-agenda-title">{{contentlist.title}}</div>
              <div class="topic-agenda-note">{{contentlist.note}}</div>
              <div class="topic-agenda-share"><img src="../../img/mobile/at-share-icon-1.png"> <span class="pub-time">{{contentlist.publish_time}}</span></div>
            </div>
          </div>
        </div>
        <!--精彩图集-->
        <div class="topic-agenda-list wonder-atlas"  v-if="newsdata.link_type === 'SUBJECT_GALLARY'">
          <div class="agenda-list"  @click="linkDetail" :data-id="contentlist.id" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 8">
            <div class="agenda-list-show">
              <div class="topic-agenda-img bk" v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
            </div>
            <div class="agenda-list-hover">
              <div class="topic-agenda-title">{{contentlist.title}}</div>
              <div class="topic-agenda-note">{{contentlist.note}}</div>
              <!-- <div class="topic-agenda-share"><img src="../../img/mobile/at-share-icon-1.png"> </div> -->
            </div>
            <div class="video-title">{{contentlist.title}}</div>
          </div>
        </div>
        <!--参会嘉宾-->
        <div class="participants-block" v-if="newsdata.link_type === 'SUBJECT_GUEST'">
          <div class="participants-list"  @click="linkDetail" :data-id="contentlist.id"  v-for="(contentlist, contindex) in newsdata.list">
            <div class="member-show">
              <div class="participants-img bk" v-lazy:background-image="{src: contentlist.cover_path, error: imgUrl, loading: imgUrl}"></div>
            </div>
            <div class="member-hover">
              <div class="member-hover-name">
                {{contentlist.title}}
              </div>
              <div class="member-hover-info">
                <span class="info-text">{{contentlist.note}}</span>
                <!-- <span class="info-text">韩国前总理</span>
                <span class="info-text">第56届联合国大会主席</span> -->
              </div>
              <!-- <div class="member-share"><img src="../../img/mobile/at-share-icon-1.png"></div> -->
            </div>
            <div class="participants-name">{{contentlist.title}}</div>
          </div>
          <div class="clear"></div>
        </div>
        <!--会议时间表-->
        <div class="topic-timetable" v-if="newsdata.link_type === 'CONFERENCE'">
          <!--<div class="timetable-left bk" v-lazy:background-image="{src: newsdata.ads[0].img, error: imgUrl, loading: imgUrl}">-->
          <div class="timetable-left bk" @click="adsLink" :data-link="newsdata.ads[0].link" v-lazy:background-image="{src: newsdata.ads[0].img, error: imgUrl, loading: imgUrl}" v-if="newsdata.ads.length > 0 && newsdata.list.length < 4">
          </div>
          <!-- <div class="timetable-left bk" v-lazy:background-image="{error: imgUrl, loading: imgUrl}" v-else></div> -->
          <div class="timetable-right" v-bind:class="{'fourtab': newsdata.list.length > 3}">
            <div class="timetable-right-top" >
              <div class="timetable-top-tab">
                <div class="timetable-tab-bk" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 4">
                  <div class="timetable-tab-list" @click="checkTime" :data-id="contindex" v-bind:class="{'active': contindex === subjectid}">
                    <span class="focus-icon"></span>
                    {{contentlist.day}}
                  </div>
                </div>
              </div>
            </div>
            <div class="timetable-right-content">
              <div class="content-time-img" v-for="(contentlist, contindex) in newsdata.list" v-if="contindex < 4 && contindex === subjectid" id="content-time-img">
                <img :src="contentlist.img">
              </div>
              <div class="img-scroll-icon bot" @click="smoothDown">
                <img src="../../img/mobile/foot.png">
              </div>
              <div class="img-scroll-icon top">
                <img src="../../img/mobile/top.png" @click="smoothUp">
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="topic-content-block" v-for="(newsdata, newsindex) in datalist.news" v-if="newsdata.link_type === 'SUBJECT'">
        <div class="topic-title">
          {{newsdata.second_level_name}}
        </div>
        <div class="topic-agenda-list">
          <swiper :options="swiperOptionHome2" ref="mySwiper">
            <swiper-slide v-for="(contentlist, contindex) in newsdata.list">
              <div @click="linkTopic" :data-id="contentlist.id">
                <div class="topic-agenda-img bk" :style="{backgroundImage:'url(' + contentlist.banner + ')'}"></div>
                <div class="video-title">{{contentlist.name}}</div>
              </div>
            </swiper-slide>
            <div class="swiper-prev" slot="button-prev" v-if="newsdata.list.length > 4">
              <img src="../../img/mobile/leftswp.png">
            </div>
            <div class="swiper-next" slot="button-next" v-if="newsdata.list.length > 4">
              <img src="../../img/mobile/rightswp.png">
            </div>
          </swiper>
        </div>
      </div>
      <div class="topic-content-block content-topic" v-if="datalist.subject_info.cate_id === 2">
        <div class="meeting-back-note">
          {{datalist.subject_info.note}} <!-- <span>【详情】</span> -->
        </div>
      </div>
    </div>
    <footernav></footernav>
    <div class="mint-msgbox-wrapper backbox" v-if="showback" style="position: absolute; z-index: 2003;">
      <div class="mint-msgbox" style="width: 600px;">
        <div class="closeimg" @click="closeBack">
          <img src="../../img/mobile/close.png">
        </div>
        <div class="mint-msgbox-content">
          <div class="backtitle">
            会议背景
          </div>
          <div class="mint-msgbox-message">{{backcontent}}</div>
        </div>
      </div>
    </div>
    <div class="v-modal" @click="closeBack" v-if="showback" style="z-index: 2000;"></div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import api from '../../utils/api'
  import apiConfig from '../../utils/apiconfig.js'
  import helper from '../../utils/helper'
  import { Indicator, Lazyload } from 'mint-ui'
  import navblock from './components/nav'
  import searchtab from './components/searchtab'
  import searchlist from './components/search'
  import footernav from './components/footernav'
  Vue.use(Lazyload)
  export default {
    data () {
      return {
        detailtext: false,
        showback: false,
        backcontent: '',
        subjectid: 0,
        topicid: '',
        swiperOptionHome1: {
          slideToClickedSlide: true,
          slidesPerView: 1,
          spaceBetween: 10,
          autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: true
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-next',
            prevEl: '.swiper-prev'
          },
          initialSlide: 0
        },
        swiperOptionHome2: {
          slideToClickedSlide: true,
          slidesPerView: 4,
          spaceBetween: 10,
          autoplay: false,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-next',
            prevEl: '.swiper-prev'
          },
          loop: false,
          initialSlide: 0
        },
        datalist: {}
      }
    },
    components: {
      swiper,
      swiperSlide,
      navblock,
      searchtab,
      searchlist,
      footernav
    },
    updated () {
    },
    created () {
      this.topicid = this.$route.query.id
      this.getDatalist()
      var imgUrl = require('../../img/mobile/blank.jpg')
      this.imgUrl = imgUrl
    },
    methods: {
      smoothDown () {
        var timeimg = document.getElementById('content-time-img')
        var smoothDown = 0
        var step = 50
        var distance = timeimg.scrollTop
        distance += step
        timeimg.scrollTop = distance
        setTimeout(smoothDown, 3000)
      },
      smoothUp () {
        var timeimg = document.getElementById('content-time-img')
        var smoothDown = 0
        var step = 50
        var distance = timeimg.scrollTop
        distance -= step
        timeimg.scrollTop = distance
        setTimeout(smoothDown, 3000)
      },
      getDatalist () {
        var that = this
        var param = {
          subject_id: that.topicid
        }
        Indicator.open('加载中...')
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.topicurl), this.params, res => {
          that.prefix = api.DOMAIN() + helper.getImageApiPrefix()
          that.datalist = res
          var title = res.subject_info.name
          document.title = title + '-国际金融论坛'
          Indicator.close()
          this.$nextTick(function () {
            var heightCss = this.$refs.elememt.clientHeight
            if (heightCss >= 155) {
              this.detailtext = true
            } else {
              this.detailtext = false
            }
            console.log(heightCss)
          })
        }, res => {
          console.log(res)
          Indicator.close()
        })
      },
      morebtn (e) {
        let conttype = e.currentTarget.dataset.type
        if (conttype === 'AUTHOR') {
          this.$router.push('/home/authorlist?id=' + e.currentTarget.dataset.id + '&sbjid=' + this.topicid)
        } else {
          this.$router.push('/home/list?id=' + e.currentTarget.dataset.id + '&sbjid=' + this.topicid)
        }
      },
      linkTopic (e) {
        this.topicid = e.currentTarget.dataset.id
        this.getDatalist()
        console.log(e.currentTarget.dataset.id)
        this.$router.push('/home/conferencetopics?id=' + e.currentTarget.dataset.id)
      },
      linkDetail (e) {
        console.log(e.currentTarget.dataset.id)
        this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id)
      },
      adsLink (ele) {
        window.location.href = ele.currentTarget.dataset.link
      },
      checkTime (e) {
        console.log(e.currentTarget.dataset.id)
        this.subjectid = parseInt(e.currentTarget.dataset.id)
      },
      toBackDetail () {
        this.showback = true
        this.backcontent = this.datalist.subject_info.note
      },
      closeBack () {
        this.showback = false
      }
    }
  }
</script>
<style>

</style>
